<template>
    <div class="ml-16px mr-16px content-container">
        <div class="flex flex-center pt-30px pb-15px">
            <div class="flex steps">
                <div class="item" :class="{ 'step': state.stepIndex.includes(index)}" v-for="(item, index) in state.steps"
                    :key="index">
                    <p v-html="item.title"></p>
                    <span>{{ item.txt }}</span>
                </div>
            </div>
        </div>
        <div class="px-26px">
            <el-divider />
        </div>
        <template v-if="state.step === 0">
            <Step1 :model-value="state.step" :rule-form="ruleForm" :editor="'editorEdit'" @update:model-value="handleStep" />
        </template>
        <template v-if="state.step === 1">
            <Step2 :model-value="state.step" :rule-form="ruleForm" @update:model-value="handleStep" @step-2-complete="handleStep2Data" />
        </template>
        <template v-if="state.step === 2">
            <Step3 :model-value="state.step" @update:model-value="handleStep" />
        </template>
    </div>
</template>

<script setup lang="ts">
import { CircleCloseFilled } from '@element-plus/icons-vue'
import { editProductApi,getUpdateProductApi } from '@/api/b2b'
import { confirmMessageBox } from '@/utils/elMessageBox'
import { convertWord } from '@/utils/index'
import Step1 from './components/Step-1.vue'
import Step2 from './components/Step-2.vue'
import Step3 from './components/Step-3.vue'

const route = useRoute()

const state = reactive({
    step: -1,
    steps: [
        {
            title: '第<b>1</b>步',
            txt: '修改产品信息'
        },
        {
            title: '第<b>2</b>步',
            txt: '修改产品关键词'
        },
        {
            title: '第<b>3</b>步',
            txt: '修改成功'
        }
    ],
    stepIndex:[0]
    
})

const ruleForm = reactive({
    id:'',
    name: '',
    model: '',
    brand: '',
    province: '',
    city: '',
    area:'',
    intro: '',
    content:'',
    mainWords:[
        {
            label:'',
            value:0
        }
    ],
    keyword:'',
    frontWords: [],
    frontWord:'',
    backWords: [],
    backWord:'',
    cusKeyword:'',
    deleteWord:'',
    cityKey: '',
    images: [
        {
            url: ''
        },
        {
            url: ''
        },
        {
            url: ''
        },
        {
            url: ''
        },
        {
            url: ''
        },
    ]
})


async function handleStep2Data(value: any){
    try  {
        const res:ResType = await editProductApi({
            id:route.params.id,
            InforTitle:ruleForm.name,
            InforModel:ruleForm.model,
            BrandName:ruleForm.brand,
            InforOrigin:ruleForm.province + '/' + ruleForm.city,
            Description:ruleForm.intro,
            InforPicTure:ruleForm.images[0].url,
            InforPicTure2:ruleForm.images[1].url,
            InforPicTure3:ruleForm.images[2].url,
            InforPicTure4:ruleForm.images[3].url,
            InforPicTure5:ruleForm.images[4].url,
            InforContent:ruleForm.content,
            Keyword:convertWord(ruleForm.mainWords),
            LKeyword:convertWord(ruleForm.frontWords),
            RKeyword:convertWord(ruleForm.backWords),
            CusKeyword:ruleForm.cusKeyword,
            Region:ruleForm.area,
            DeleteKeyword:ruleForm.deleteWord.endsWith("/") ? ruleForm.deleteWord.slice(0, -1) : ruleForm.deleteWord //去除字符串末尾的斜杠
        })
        if(res.code === 200){
            state.step = 2
            state.stepIndex.push(2)
        }
    }catch(error:any){
        if (error.response && error.response.status === 405){
            confirmMessageBox(CircleCloseFilled, error.response.data.message)
        }
    }
}

async function getUpdateProduct(){
    const id = route.params.id
    const res:any = await getUpdateProductApi({
      id:id
    })
    if(res.code === 200){
        ruleForm.name = res.data.InforTitle
        ruleForm.model = res.data.InforModel
        ruleForm.brand = res.data.BrandName
        ruleForm.intro = res.data.Description
        ruleForm.images[0].url = res.data.InforPicTure
        ruleForm.images[1].url = res.data.InforPicTure2
        ruleForm.images[2].url = res.data.InforPicTure3
        ruleForm.images[3].url = res.data.InforPicTure4
        ruleForm.images[4].url = res.data.InforPicTure5
        ruleForm.content = res.data.InforContent,
        ruleForm.cusKeyword = res.data.CusKeyword
        ruleForm.area = res.data.Region || ''
        ruleForm.frontWords = res.leftkeydata
        ruleForm.backWords = res.rightkeydata
        ruleForm.deleteWord = res.deletekeydata

        if(res.data.Keyword == ''){
            ruleForm.mainWords = [
                {
                    label:'',
                    value:0
                }
            ]
        }else{
            ruleForm.mainWords = [
                {
                    label:res.data.Keyword,
                    value:1
                }
            ]
        }

        nextTick(() => {
            ruleForm.province = res.data.InforOrigin.split('/')[0]
            ruleForm.city = res.data.InforOrigin.split('/')[1]
            //state.step = 0  //等数据都加载完，再显示组件内容

            const step = route.query.step
            if(step){
                state.step = Number(route.query.step)
                state.stepIndex = [0,1]
            }else{
                state.step = 0
                state.stepIndex = [0]
            }
        })
    }
}

function handleStep(val:number){
    // 找到要删除项的索引
    let index = state.stepIndex.findIndex(item => item === val);
    if (index !== -1) {
        state.step = val - 1
        state.stepIndex.splice(index, 1); // 从索引处删除一个元素
    }else{
        state.stepIndex.push(val)
        state.step = val
    }
    if(val === 2){
        state.step = 1
        state.stepIndex = [0,1]
    }
}

onMounted(() => {
    getUpdateProduct()
})
</script>

<style lang="scss" scoped>
:deep(.el-checkbox-group) {
    display: flex;
    flex-direction: column;
}
</style>